<template>
  <div class="settings-container" :class="{ 'elderly-mode': elderlyModeEnabled }">
    <div class="settings-header">
      <van-nav-bar
        title="应用设置"
        left-arrow
        @click-left="goBack"
      />
    </div>
    
    <div class="settings-content">
      <div class="settings-section">
        <h2 class="section-title">辅助功能</h2>
        <div class="section-description">调整应用的显示方式，使其更易于使用</div>
        
        <div class="settings-item elderly-mode-item">
          <div class="settings-item-info">
            <span class="settings-item-title">适老化模式</span>
            <span class="settings-item-desc">增大字体和按钮，优化对比度，方便老年人使用</span>
          </div>
          <van-switch 
            v-model="localElderlyMode" 
            size="24" 
            @change="toggleElderlyMode"
            active-color="#07c160"
            inactive-color="#dcdee0"
          />
        </div>
      </div>
      
      <div class="settings-section">
        <h2 class="section-title">AI模型设置</h2>
        <div class="section-description">配置在对话中可用的AI模型</div>
        
        <div v-if="!showModelConfig" class="settings-item">
          <div class="settings-item-info">
            <span class="settings-item-title">已启用 {{ enabledModelIds.length }} 个模型</span>
            <span class="settings-item-desc">点击右侧按钮进行配置</span>
          </div>
          <van-button 
            type="primary" 
            size="small" 
            @click="showModelConfig = true"
          >
            配置模型
          </van-button>
        </div>
        
        <div v-if="showModelConfig" class="model-config">
          <div class="model-selection-actions">
            <van-button 
              type="default" 
              size="small" 
              @click="selectAllModels"
            >
              全部选择
            </van-button>
            <van-button 
              type="default" 
              size="small" 
              @click="deselectAllModels"
            >
              全部取消
            </van-button>
          </div>
          
          <div class="model-list">
            <div 
              v-for="model in availableModels" 
              :key="model.id" 
              class="model-item"
            >
              <div class="model-item-info">
                <span class="model-name">{{ model.name }}</span>
                <span v-if="model.hasDeepThinking" class="feature-tag">支持深度思考</span>
              </div>
              <van-checkbox 
                :model-value="isModelEnabled(model.id)" 
                @update:model-value="toggleModel(model.id)"
              />
            </div>
          </div>
          
          <div class="bottom-actions">
            <div class="settings-actions">
              <van-button 
                type="default" 
                @click="cancelModelConfig"
                class="cancel-btn"
              >
                取消
              </van-button>
              <van-button 
                type="primary" 
                @click="saveSettings"
                :disabled="selectedModelIds.length === 0"
              >
                保存设置
              </van-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useChatStore } from '../store/chat'
import { storeToRefs } from 'pinia'

const router = useRouter()
const chatStore = useChatStore()
const { availableModels, enabledModelIds, elderlyModeEnabled } = storeToRefs(chatStore)

// 本地状态，用于控制开关
const localElderlyMode = ref(elderlyModeEnabled.value)

// 监听全局状态变化，同步到本地状态
watch(elderlyModeEnabled, (newValue) => {
  console.log('Settings组件检测到适老化模式变化:', newValue)
  localElderlyMode.value = newValue
})

// 是否显示模型配置
const showModelConfig = ref(false)

// 选中的模型ID列表
const selectedModelIds = ref<string[]>([])

// 检查模型是否启用
function isModelEnabled(modelId: string): boolean {
  return selectedModelIds.value.includes(modelId)
}

// 切换模型选择状态
function toggleModel(modelId: string) {
  if (isModelEnabled(modelId)) {
    // 如果已选中，则移除
    selectedModelIds.value = selectedModelIds.value.filter(id => id !== modelId)
  } else {
    // 如果未选中，则添加
    selectedModelIds.value.push(modelId)
  }
}

// 全选所有模型
function selectAllModels() {
  selectedModelIds.value = availableModels.value.map(model => model.id)
}

// 取消选择所有模型
function deselectAllModels() {
  selectedModelIds.value = []
}

// 切换适老化模式
function toggleElderlyMode() {
  // 先更新本地状态，提供即时反馈
  localElderlyMode.value = !localElderlyMode.value
  
  // 然后调用store方法更新全局状态
  chatStore.toggleElderlyMode()
  
  // 添加一个提示，让用户知道设置已经生效
  setTimeout(() => {
    // 使用更明显的提示方式
    const toast = document.createElement('div')
    toast.className = 'mode-change-toast'
    toast.textContent = localElderlyMode.value ? '已开启适老化模式' : '已关闭适老化模式'
    document.body.appendChild(toast)
    
    // 2秒后移除提示
    setTimeout(() => {
      toast.classList.add('fade-out')
      setTimeout(() => {
        document.body.removeChild(toast)
      }, 500)
    }, 1500)
  }, 100)
}

// 取消模型配置
function cancelModelConfig() {
  showModelConfig.value = false
  // 重置选中的模型列表
  selectedModelIds.value = [...enabledModelIds.value]
}

// 保存设置
function saveSettings() {
  if (selectedModelIds.value.length === 0) {
    alert('请至少选择一个AI模型')
    return
  }
  
  chatStore.updateEnabledModels(selectedModelIds.value)
  alert('设置已保存')
  showModelConfig.value = false
}

// 返回上一页
function goBack() {
  router.back()
}

onMounted(() => {
  // 初始化选中的模型列表
  selectedModelIds.value = [...enabledModelIds.value]
})
</script>

<style scoped>
.settings-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f7f7;
}

.settings-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 80px; /* 为底部固定按钮留出空间 */
}

.settings-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #333;
}

.section-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}

.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #eee;
}

.settings-item-info {
  display: flex;
  flex-direction: column;
}

.settings-item-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.settings-item-desc {
  font-size: 14px;
  color: #666;
}

.model-config {
  margin-top: 16px;
}

.model-selection-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.model-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.model-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #eee;
}

.model-item-info {
  display: flex;
  flex-direction: column;
}

.model-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.feature-tag {
  display: inline-block;
  background-color: #e8f0fe;
  color: #1989fa;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  align-self: flex-start;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 16px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.settings-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  max-width: 800px;
  margin: 0 auto;
}

.cancel-btn {
  min-width: 100px;
}

/* 适老化模式样式 */
.elderly-mode {
  font-size: 18px;
}

.elderly-mode .section-title {
  font-size: 24px;
}

.elderly-mode .section-description {
  font-size: 18px;
}

.elderly-mode .settings-item-title {
  font-size: 20px;
}

.elderly-mode .settings-item-desc {
  font-size: 18px;
}

.elderly-mode .model-name {
  font-size: 20px;
}

.elderly-mode .feature-tag {
  font-size: 16px;
  padding: 4px 10px;
}

.elderly-mode .van-button {
  font-size: 18px;
  height: auto;
  padding: 12px 20px;
}

.elderly-mode .van-checkbox__label {
  font-size: 18px;
}

.elderly-mode .van-switch {
  transform: scale(1.2);
}

/* 适老化模式项目高亮 */
.elderly-mode-item {
  border: 2px solid #e8f5e9;
  background-color: #f1f8e9;
  transition: all 0.3s ease;
}

.elderly-mode .elderly-mode-item {
  border: 2px solid #4caf50;
  background-color: #e8f5e9;
}

.elderly-mode-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 模式切换提示样式 */
:global(.mode-change-toast) {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 16px 24px;
  border-radius: 8px;
  font-size: 18px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.3s ease;
  text-align: center;
  min-width: 200px;
}

:global(.elderly-mode .mode-change-toast) {
  font-size: 24px;
  padding: 20px 30px;
  min-width: 250px;
}

:global(.mode-change-toast.fade-out) {
  animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -60%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes fadeOut {
  from { opacity: 1; transform: translate(-50%, -50%); }
  to { opacity: 0; transform: translate(-50%, -40%); }
}
</style> 